<template>
  <div class="channel-chart">
    <div class="channel-list">
      <div 
        v-for="(item, index) in data" 
        :key="item.name"
        class="channel-item"
        :style="{ animationDelay: index * 0.1 + 's' }"
      >
        <div class="channel-info">
          <div class="channel-icon">
            <svg viewBox="0 0 24 24">
              <path :d="getChannelIcon(item.name)" fill="currentColor"/>
            </svg>
          </div>
          <div class="channel-details">
            <div class="channel-name">{{ item.name }}</div>
            <div class="channel-value">{{ item.value }}%</div>
          </div>
        </div>
        
        <div class="channel-progress">
          <div 
            class="progress-fill" 
            :style="{ 
              width: item.value + '%',
              backgroundColor: getChannelColor(item.name),
              animationDelay: (index * 0.2 + 0.5) + 's'
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

const getChannelIcon = (name) => {
  const icons = {
    '在线预订': 'M12,2A2,2 0 0,1 14,4V8A2,2 0 0,1 12,10A2,2 0 0,1 10,8V4A2,2 0 0,1 12,2M21,9V7L15,1H5C3.89,1 3,1.89 3,3V21A2,2 0 0,0 5,23H19A2,2 0 0,0 21,21V9',
    '现场购票': 'M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M17,13H13V17H11V13H7V11H11V7H13V11H17V13Z',
    '旅行社': 'M15,3H17V5H15V3M11,3H13V5H11V3M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M19,19V8H5V19H19Z',
    '团购平台': 'M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z',
    '线上预订': 'M12,2A2,2 0 0,1 14,4V8A2,2 0 0,1 12,10A2,2 0 0,1 10,8V4A2,2 0 0,1 12,2M21,9V7L15,1H5C3.89,1 3,1.89 3,3V21A2,2 0 0,0 5,23H19A2,2 0 0,0 21,21V9',
    '其他': 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17A1.5,1.5 0 0,0 13.5,15.5A1.5,1.5 0 0,0 12,14A1.5,1.5 0 0,0 10.5,15.5A1.5,1.5 0 0,0 12,17M12,10.5C13.25,10.5 14.29,9.59 14.46,8.39C14.84,8.78 15,9.34 15,10A3,3 0 0,1 12,13A3,3 0 0,1 9,10C9,9.34 9.16,8.78 9.54,8.39C9.71,9.59 10.75,10.5 12,10.5Z'
  }
  return icons[name] || icons['其他']
}

const getChannelColor = (name) => {
  const colors = {
    '在线预订': '#00ff88',
    '现场购票': '#00bcd4',
    '旅行社': '#ffab40',
    '团购平台': '#66bb6a',
    '线上预订': '#00ff88',
    '其他': '#66bb6a'
  }
  return colors[name] || '#00ff88'
}
</script>

<style scoped>
.channel-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.channel-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-around;
}

.channel-item {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
  animation: slideInLeft 0.6s ease-out;
}

.channel-item:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateX(5px);
}

.channel-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.channel-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  color: #00ff88;
  flex-shrink: 0;
}

.channel-icon svg {
  width: 18px;
  height: 18px;
}

.channel-details {
  flex: 1;
}

.channel-name {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.2rem;
}

.channel-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.channel-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: all 0.8s ease;
  position: relative;
  animation: progressFill 1s ease-out;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes progressFill {
  from {
    width: 0 !important;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
</style> 